<template>
  <div class="">
    <van-swipe-cell v-for="item in $store.state.shopcar" :key="item.id">
      <van-row>
        <van-col span="4"
          ><input type="checkbox" v-model="result" :value="item" @change="check"
        /></van-col>
        <van-col span="20"
          ><van-card
            :num="item.num"
            :price="item.price"
            :title="item.name"
            :desc="item.goods_brief"
            :thumb="item.primary_pic_url"
          >
            <template #footer>
              <van-stepper v-model="item.num" @change="change" />
            </template>
          </van-card>
        </van-col>
      </van-row>

      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <van-button
      square
      text="选中删除"
      type="danger"
      class="delete-button"
      @click="removeall"
    />

    <van-submit-bar :price="sum * 100" button-text="提交订单">
      <van-checkbox v-model="checked" @click="checkall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      result: [],
    };
  },
  mounted() {},
  methods: {
    change() {
      this.$store.commit("change");
    },
    check() {
      if (this.$store.state.shopcar.length == this.result.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    },
    checkall() {
      if (this.checked == true) {
        this.result = this.$store.state.shopcar;
      } else {
        this.result = [];
      }
    },
    removeall() {
      this.$store.commit("removeall", this.result);
      this.result = [];
    },
  },
  components: {},
  computed: {
    sum() {
      let num = 0;
      this.result.forEach((item) => {
        num += item.num * item.retail_price;
      });
      return num;
    },
  },
};
</script>

<style lang="scss"></style>
